<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/demo04.css">
</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">{{count}}人在线</el-menu-item>
                <el-menu-item index="2">商品管理</el-menu-item>
                <el-menu-item index="5" id="rightel" class="rightel" @click="dialogFormVisible0 = true">{{username}}<i
                        class="el-icon-user-solid"></i></el-menu-item>
                <el-dialog title="是否退出到登录界面？" :visible.sync="dialogFormVisible0">
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible0 = false">取 消</el-button>
                        <el-button type="primary" @click="logout">确 定</el-button>
                    </div>
                </el-dialog>
            </el-menu>
        </el-header>
        <el-main>
            <el-form :inline="true" :model="userMes" class="demo-form-inline">

                <el-form-item label="商品名称">
                    <el-input v-model="userMes.name" placeholder="商品名称"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="userMes.price" placeholder="商品价格"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="chaxun">查询</el-button>
                    <el-button type="success" @click="xinzeng">新增</el-button>
                    <el-dialog title="商品信息" :visible.sync="dialogFormVisible1">
                        <el-form :label-position="labelPosition" label-width="80px" :model="addMes">
                            <el-form-item label="商品名称">
                                <el-input v-model="addMes.name"></el-input>
                            </el-form-item>
                            <br><br>
                            <el-form-item label="商品图片">
                                <el-input v-model="addMes.imgsrc"></el-input>
                            </el-form-item>
                            <br><br>
                            <el-form-item label="商品价格">
                                <el-input v-model="addMes.price"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="confirm_add">确 定</el-button>
                        </div>
                    </el-dialog>
                </el-form-item>
            </el-form>
            <template>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column label="编号" width="330">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" width="330">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品图片" width="330">
                        <template slot-scope="scope">
<!--                            <span style="margin-left: 10px">{{ scope.row.imgsrc }}</span>-->
                            <img :src="scope.row.imgsrc" style="width: 80px">
                        </template>
                    </el-table-column>
                    <el-table-column label="商品价格" width="330">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.price }}</span>
                        </template>
                    </el-table-column>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

                            <el-dialog title="商品信息" :visible.sync="dialogFormVisible">
                                <el-form :label-position="labelPosition" label-width="80px" :model="updateMes">
                                    <el-form-item label="商品名称">
                                        <el-input v-model="updateMes.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="商品图片">
                                        <el-input v-model="updateMes.imgsrc"></el-input>
                                    </el-form-item>
                                    <el-form-item label="商品价格">
                                        <el-input v-model="updateMes.price"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="modById">确 定</el-button>
                                </div>
                            </el-dialog>
                            <el-button size="mini" type="danger"
                                       @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage4" :page-sizes="[3, 6, 9]" :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-main>
    </el-container>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/js.cookie.min.js"></script>
<!--处理拦截-->
<script src="js/request.js"></script>
<script>

    new Vue({
        el: '#app',
        data: {
            activeIndex2: '1',
            username: "man",
            count: 0,
            total: 10,
            userMes: {
                name: '',
                price: '',
                currentPage4: 1,
                pageSize: 3
            },
            addMes: {
                name: '',
                imgsrc: 'img/goods/',
                price: ''
            },
            updateMes: {
                name: '',
                imgsrc: '',
                price: '',
            },
            tableData: [{
                id: '1',
                name: '王小虎',
                imgsrc: 'D:\\大二\\实验\\Web实验\\界面\\img\\goods\\1.png',
                price: '15.9'
            }, {
                id: '2',
                name: '王小虎',
                imgsrc: 'D:\\大二\\实验\\Web实验\\界面\\img\\goods\\1.png',
                price: '15.9'
            }, {
                id: '3',
                name: '王小虎',
                imgsrc: 'D:\\大二\\实验\\Web实验\\界面\\img\\goods\\1.png',
                price: '15.9'
            }, {
                id: '4',
                name: '王小虎',
                imgsrc: 'D:\\大二\\实验\\Web实验\\界面\\img\\goods\\1.png',
                price: '15.9'
            }, {
                id: '5',
                name: '王小虎',
                imgsrc: 'D:\\大二\\实验\\Web实验\\界面\\img\\goods\\1.png',
                price: '15.9'
            }],
            gridData: [{
                date: '2016-05-02',
                username: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                username: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                username: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-03',
                username: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            dialogFormVisible0: false,
            dialogFormVisible1: false,
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px'
        },
        mounted() {
            this.init()
            var _this = this
            axios.get("/taobao/manager/getName")
                .then(resp => {
                    // 实现用户名的初始化
                    _this.username = resp.data
                })

            setInterval(function () {
                axios.get("/taobao/manager/count")
                    .then(resp => {
                        _this.count = resp.data
                    })
            }, 3000)
        },
        methods: {
            init() {
                var _this = this
                axios.post("/taobao/goods/findCon", _this.userMes)
                    .then(resp => {
                        if (resp.data == "none") {
                            alert("暂无数据")
                        } else {
                            // console.log(resp.data.data)
                            _this.tableData = resp.data.list
                            _this.total = resp.data.total
                        }
                    })
            },
            logout() {
                axios.get("/taobao/manager/logout")
                    .then(resp => {
                        window.location.href = "/taobao/login_mn.html"
                    })
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            chaxun() {
                // console.log('submit!');
                this.init()

            },
            xinzeng() {
                this.dialogFormVisible1 = true
            },
            confirm_add() {
                this.dialogFormVisible1 = false
                var _this = this
                axios.post("/taobao/goods/add", this.addMes)//传的数据是addMes,因为在表单中是通过addMes传信息
                    .then(resp => {
                        if (resp.data == "failed") {
                            alert("新增失败")
                        } else {
                            alert("新增成功")
                            _this.init()
                        }
                        console.log('submit!');//原来的onSubmit中的语句
                    })
            },
            handleEdit(index, row) {
                this.dialogFormVisible = true
                var _this = this
                axios.get("/taobao/goods/getById?id=" + row.id)//此处row前面不能加this字段，否则无效
                    .then(resp => {
                        console.log(resp.data)
                        _this.updateMes = resp.data
                    })
            },
            modById() {
                var _this = this
                axios.post("/taobao/goods/modById", this.updateMes)
                    .then(resp => {
                        if (resp.data == "succeed") {
                            alert("修改成功")
                            _this.updateMes = resp.data
                        } else {
                            alert("修改失败")
                        }
                        _this.dialogFormVisible = false
                        _this.init()
                    })
            },

            handleDelete(index, row) {
                var _this = this
                axios.get("/taobao/goods/del?id=" + row.id)
                    .then(resp => {
                        if (resp.data == "succeed") {
                            alert("删除成功")
                        } else {
                            alert("删除失败")
                        }
                        _this.init()
                    })
            },
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.userMes.pageSize = val
                this.init()
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.userMes.currentPage4 = val
                this.init()
            }

        }
    })
</script>

</html>